<!DOCTYPE HTML>
<html lang="zh-CN">
  <head>
    <title>登录</title>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
   	  html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; 
      }
      .container {
        width: 300px;
      }
      .container > .content {
        background-color: #fff;
        padding: 30px;
        padding-top:10px;
        margin: 0 -20px; 
        -webkit-border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
        box-shadow: 0 1px 2px rgba(0,0,0,.15);
        }
    </style>
  </head>
  
  <body>
  	<div class="container">
  		<div class="content">
  		  <h4>登录</h4>
		  <div class="form-group">
		    <input type="text" class="form-control" id="name" placeholder="用户名" >
		  </div>
		  <div class="form-group">
		    <input type="password" class="form-control" id="pwd" placeholder="密码">
		  </div>
		  <div id="errorInfo" class="alert alert-danger text-center hide" role="alert" style="padding: 3px;">用户名或密码不正确</div>
		  <button type="button" id="subtn" class="btn btn-success btn-block" data-loading-text="Loading...">提交</button>
 		</div>
  	</div>
  	<script type="text/javascript">
  		$(function() {
  			$("#pwd").keydown(function(e) {
  				if(e.keyCode == 13) {
  					$("#subtn").trigger("click");
  				}
  			});
  			
  			$("#name,#pwd").blur(function() {
  				$(this).parent().removeClass("has-error");
  			});
  			
  			$("#subtn").click(function() {
  				if($("#name").val() == "") {
  					$("#name").parent().addClass("has-error");
  					return false;
  				}
  				if($("#pwd").val() == "") {
  					$("#pwd").parent().addClass("has-error");
  					return false;
  				}
  				$("#errorInfo").addClass("hide");
  				$.post("login",{name:$("#name").val(),pwd:$("#pwd").val()}, function(data) {
  					if(data == "success") {
  						window.location="index.html";
  					} else {
  						$("#pwd").val("");
  						$("#errorInfo").removeClass("hide");
  						$(this).button("reset");
  					}
  				});
  			});
  		});
  	</script>
  </body>
</html>
